<template>
  <a-modal
    destroyOnClose
    title="选择规格"
    v-model="visible"
    :afterClose="closeModel"
    :width="900"
    @ok="onOk"
    @cancel="onCancel()"
    :closable="false"
    :maskClosable="false"
  >
    <a-table v-if="newItem" :columns="columns" :data-source="newItem.attr" :pagination="false">
      <div slot="numDropdown" slot-scope="setSelectedKeys, selectedKeys" style="padding: 8px">
        <a-input-search
          @search="e => settingDayAll(e, setSelectedKeys, selectedKeys)"
          size="small"
          placeholder="批量设置"
        >
          <a-icon slot="enterButton" type="plus" />
        </a-input-search>
      </div>
      <div slot="priceDropdown" slot-scope="setSelectedKeys, selectedKeys" style="padding: 8px">
        <a-input-search
          @search="e => settingDayAll(e, setSelectedKeys, selectedKeys)"
          size="small"
          placeholder="批量设置"
        >
          <a-icon slot="enterButton" type="plus" />
        </a-input-search>
      </div>

      <div slot="name" slot-scope="scope, text">
        <div class="imgTxt">
          <div class="img">
            <img :src="text.pic" alt="" />
          </div>
          <div class="txt">
            <div class="name">{{ getAttrName(text) }}</div>
          </div>
        </div>
      </div>

      <div slot="pt_price" slot-scope="scope, text">
        <a-input-number size="small" v-model="text.pt_price" :min="0" :precision="2" />
      </div>

      <!-- <div slot="seckill_num" slot-scope="scope, text">
        <a-input-number size="small" v-model="text.seckill_num" :min="0" :precision="0" />
      </div> -->

      <!-- <div slot="action" slot-scope="scope, text">
        <a-checkbox :checked="text.checked" @change="checked(text)"> </a-checkbox>
      </div> -->
    </a-table>
  </a-modal>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: null
    }
  },

  data() {
    return {
      visible: false,
      newItem: null,

      columns: [
        {
          title: '商品信息',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '原价',
          dataIndex: 'price',
          sorter: (a, b) => a.price - b.price
        },
        {
          title: '库存',
          dataIndex: 'num',
          sorter: (a, b) => a.num - b.num
        },
        {
          title: '活动价格',
          dataIndex: 'pt_price',
          scopedSlots: {
            customRender: 'pt_price',
            filterDropdown: 'numDropdown',
            filterIcon: 'numIcon'
          }
        },
        // {
        //   title: '秒杀库存',
        //   dataIndex: 'seckill_num',
        //   scopedSlots: {
        //     customRender: 'seckill_num',
        //     filterDropdown: 'priceDropdown',
        //     filterIcon: 'priceIcon'
        //   }
        // },
        // {
        //   title: '是否参与',
        //   dataIndex: 'action',
        //   scopedSlots: { customRender: 'action' }
        // }
      ]
    }
  },

  computed: {
    getAttrName() {
      return item => {
        return item.attr_list.map(el => el.attr_name).join(',')
      }
    }
  },

  watch: {
    item: {
      handler(e) {
        if (e) {
          let newItem = JSON.parse(JSON.stringify(e))
          newItem.attr = newItem.attr.map(el => {
            el.checked = true
            return el
          })

          this.newItem = newItem
        }
      },
      deep: true
    }
  },

  methods: {
    settingDayAll(e, setSelectedKeys, selectedKeys) {
      if (this.newItem.attr) {
        this.newItem.attr.forEach((element, index) => {
          this.newItem.attr[index][setSelectedKeys.column.dataIndex] = e
        })
      }
    },

    checked(item) {
      item.checked = !item.checked
    },

    onCancel() {
      this.visible = false
    },

    onOk() {
      this.visible = false
      this.$emit('onOk', this.newItem)
    }
  }
}
</script>

<style lang="less" scoped>
.imgTxt {
  display: flex;

  .img {
    width: 50px;
    height: 50px;

    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .txt {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-left: 10px;
    height: 50px;
  }

  .name {
    display: -webkit-box;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    overflow: hidden;
  }
}
</style>
